<template>
  <view>
    <nav-bar :page-title="lang.pageTitle"/>
    <view class="padding-30">
      <!-- باش قىسىم -->
      <view class="center margin-bottom-60">
        <text class="text-40">{{ lang.title }}</text>
      </view>

      <!-- ھۆججەت تاللاش -->
      <view v-if="!selectedFile" class="center gap-40 upload-box" @click="selectPDF">
        <image src="/static/upload/upload.svg" class="upload-icon"/>
        <view class="upload-text">{{ lang.selectFile }}</view>
      </view>

      <view v-else class="card flex-between selected-file">
        <view class="flex-center gap-20" style="width: 70%;">
          <view class="padding-30 radio-20 center pdf">
            <image src="/static/ext/pdf.svg" class="file-icon"/>
          </view>
          <view class="text-to text-32">{{ selectedFile.name }}</view>
        </view>
        <view class="column-center gap-20">
          <button class="btn preview" @click="previewFile">{{ toolBoxLang.preview }}</button>
          <button class="btn delete" @click="removeFile">{{ toolBoxLang.delete }}</button>
        </view>
      </view>

      <!-- نەتىجە -->
      <view v-if="result" class="result-card">
        <view class="center result-header">
          <text class="text-32 color-white">{{ toolBoxLang.convertComplete }}</text>
        </view>

        <view class="result-content">
          <image :src="result.image" mode="widthFix" class="long-image" @click="previewImage"/>

          <view class="flex-between gap-20 margin-top-30">
            <view class="color-white radio-30 center action-btn share" @click="shareImage">
              {{ toolBoxLang.share }}
            </view>
            <view class="color-white radio-30 center action-btn download" @click="downloadImage">
              {{ toolBoxLang.download }}
            </view>
          </view>
        </view>
      </view>

      <!-- مۇقىملاشتۇرۇش كۇنۇپكىسى -->
      <view class="padding-30 footer">
        <button class="submit-btn" :disabled="!selectedFile" @click="handleAction">
          {{ isConverted ? toolBoxLang.selectNewFile : lang.startConvert }}
        </button>
      </view>
    </view>
  </view>
</template>

<script lang="ts">
import NavBar from "@/components/nav-bar/nav-bar.vue";
import tips from "@/utils/tips";
import {pdf2longImageUrl} from "@/services/office";

export default {
  components: {NavBar},
  data() {
    return {
      selectedFile: null,
      result: null,
      isConverted: false
    }
  },

  computed: {
    toolBoxLang() {
      return this.$t('toolBox')
    },
    lang() {
      return this.$t('toolBox.pdf2longImage')
    }
  },

  methods: {
    selectPDF() {
      uni.chooseMessageFile({
        count: 1,
        type: 'file',
        extension: ['.pdf'],
        success: (res) => {
          const {path, name} = res.tempFiles[0]
          this.selectedFile = {path, name}
        }
      })
    },

    removeFile() {
      this.selectedFile = null
      this.result = null
      this.isConverted = false
    },

    previewFile() {
      uni.openDocument({
        filePath: this.selectedFile.path,
        fileType: 'pdf',
        success: () => {
          console.log('ھۆججەت ئېچىلدى')
        }
      })
    },

    handleAction() {
      if (this.isConverted) {
        this.removeFile()
      } else {
        this.handleSubmit()
      }
    },

    handleSubmit() {
      console.log('ok ====')
      uni.showLoading({title: this.lang.processing})
      uni.uploadFile({
        url: pdf2longImageUrl,
        filePath: this.selectedFile.path,
        name: 'file',
        success: (res) => {
          const {data} = JSON.parse(res.data)
          console.log("pdf_to_long_image -=-=", data)
          this.result = data
          this.isConverted = true
          tips.toast(this.lang.convertSuccess)
        },
        fail: () => {
          tips.toast(this.lang.convertFailed)
        },
        complete: () => {
          uni.hideLoading()
        }
      })
    },

    previewImage() {
      uni.previewImage({
        urls: [this.result.image],
        current: this.result.image
      })
    },

    downloadImage() {
      uni.showLoading({title: this.lang.processing})
      uni.downloadFile({
        url: this.result.image,
        success: (res) => {
          uni.saveImageToPhotosAlbum({
            filePath: res.tempFilePath,
            success: () => {
              tips.toast(this.lang.saveSuccess)
            },
            fail: () => {
              tips.toast(this.lang.saveFailed)
            }
          })
        },
        complete: () => {
          uni.hideLoading()
        }
      })
    },

    shareImage() {
      uni.showLoading({title: this.lang.processing})
      uni.downloadFile({
        url: this.result.image,
        success: (res) => {
          uni.shareFileMessage({
            filePath: res.tempFilePath,
            success: () => {
              console.log('رەسىم يوللاندى')
            },
            fail: () => {
              tips.toast(this.lang.shareFailed)
            }
          })
        },
        complete: () => {
          uni.hideLoading()
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.upload-box {
  border: 2px dashed $uni-border-color;
  padding: 60rpx;

  .upload-icon {
    width: 80rpx;
    height: 80rpx;
  }

  .upload-text {
    font-size: 32rpx;
    color: #666;
  }
}

.selected-file {
  .file-icon {
    width: 60rpx;
    height: 60rpx;
  }

  .btn {
    font-size: 24rpx;
    color: #fff;
    width: 128rpx;
    border-radius: 12rpx;
    padding: 0;
    margin: 0;

    &.preview {
      background: #007AFF;
    }

    &.delete {
      background: #ff3b30;
    }
  }
}

.result-card {
  margin-top: 30rpx;
  border-radius: 20rpx;
  background: #ffffff;
  overflow: hidden;
  margin-bottom: 180rpx;

  .result-header {
    background: $uni-color-success;
    padding: 20rpx;
  }

  .result-content {
    padding: 30rpx;

    .long-image {
      width: 100%;
      border-radius: 16rpx;
    }

    .action-btn {
      flex: 1;
      height: 80rpx;
      font-size: 28rpx;

      &.share {
        background: $uni-color-warning;
      }

      &.download {
        background: $uni-color-success;
      }
    }
  }
}

.footer {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: #fff;
  padding-bottom: calc(env(safe-area-inset-bottom) + 20rpx);

  .submit-btn {
    width: 100%;
    height: 90rpx;
    background: linear-gradient(to right, #34c759, #30d158);
    color: #fff;
    font-size: 32rpx;
    border-radius: 46rpx;

    &[disabled] {
      background: linear-gradient(to right, #ccc, #ddd);
    }
  }
}
</style>
